<template>
  <div class="school">
      <h2>这是School组件</h2>
      <p>学校名称:{{schoolmsg.name}}</p>
      <p>学校地址:{{schoolmsg.address}}</p>
      <p>学校电话:{{schoolmsg.tel}}</p>
      <p>学校年龄:{{schoolmsg.age}}</p>
      <h3>下方News组件中新闻的长度是: {{newsList.length}}</h3>
      <select v-model.number="n">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
      <button @click="incrementSchoolAge(n)">+</button>
      <button @click="decrementSchoolAge(n)">-</button>
      <button @click="incrementIfOdd(n)">年龄为奇数再加</button>
      <button @click="incrementWait(n)">等一等再+</button>
  </div>
</template>

<script>
    import {mapState,mapMutations, mapActions} from 'vuex';
    export default {
        name:'School',
        data(){
            return {
                n:1,
            }
        },
        computed:{
            ...mapState(['schoolmsg','newsList']),
        },
        methods: {
            ...mapMutations({
                incrementSchoolAge:'INCREMENT_SCHOOL_AGE',
                decrementSchoolAge:'DECREMENT_SCHOOL_AGE',
            }),
            ...mapActions(['incrementIfOdd','incrementWait'])
        },
    }
</script>

<style scoped>
    .school{
        background-color: #B298DC;
        padding: 20px;
    }
    button{
        margin: 2px;
    }
</style>